<template>
<l-fullscreen-dialog
    :title="`${$t('查看流程')}【${title}】`"
    :visible.sync="midVisible"
    :showOk="false"

    @closed="handleClosed"
    @opened="handleOpened"

    ref="formDialog"
    >
     <template #headerRight v-if="isChildProcess" >
        <el-button  v-if="isChildProcess" size="mini" type="primary" @click="handleOpenParent" >{{$t('父级流程')}}</el-button>
    </template>
    <l-layout class="l-tab-page" :right="400">
        <l-panel :style="{ 'padding-right':userLogs.length >0?0:''}" >
            <div class="l-auto-window" style="padding: 0 8px;"  >
                <el-tabs v-model="activeName" @tab-click="handleTabClick" >
                    <el-tab-pane :label="$t('流程信息')" name="wfinfo">
                        <l-layout style="background: #f1f2f5;" :right="320">
                            <l-panel class="flow-panel" style="padding:0;padding-top:0;" >
                                <template #title>
                                    <el-button-group>
                                        <el-tooltip effect="dark" :content="$t('复原')" placement="bottom">
                                            <el-button  size="mini" icon="el-icon-aim" @click="resetZoom"></el-button>
                                        </el-tooltip>
                                        <el-tooltip effect="dark" :content="$t('放大')" placement="bottom">
                                            <el-button  size="mini" icon="el-icon-zoom-in" @click="handlerZoom(0.1)"></el-button>
                                        </el-tooltip>
                                        <el-tooltip effect="dark" :content="$t('缩小')" placement="bottom">
                                            <el-button  size="mini" icon="el-icon-zoom-out" @click="handlerZoom(-0.1)"></el-button>
                                        </el-tooltip>
                                    </el-button-group>

                                    <div style="float:right;" >
                                        <el-tag size="small" effect="plain" style="margin-right: 8px;">{{$t('正在审核')}}</el-tag>
                                        <el-tag size="small" effect="plain" style="margin-right: 8px;" type="success">{{$t('已审核')}}</el-tag>
                                    </div>
                                    
                                </template>
                                <b-wflow-viewer
                                    ref="bflow" 
                                    @elementClick="elementClick"
                                    >
                                </b-wflow-viewer>
                            </l-panel>
                            <template #right >
                                 <l-panel v-if="nodeLogs.length>0" class="flow-panel" style="padding:0;padding-top:0;" >
                                     <template #title >
                                         {{$t('记录信息')}}
                                     </template>
                                     <div class="l-rblock" style="padding:8px;overflow:hidden auto;" >
                                        <el-timeline>
                                            <el-timeline-item :type="item.type" v-for="(item,index) in nodeLogs" :key="index" :timestamp="item.time" placement="top">
                                                <el-card shadow="hover">
                                                    <div class="title" >{{item.name}}</div>
                                                    <div class="content">
                                                        <template v-if="item.taskType != 3">
                                                            <l-user v-for="(userId,index2) in item.userIds"  :key="index2" :value="userId" ></l-user>
                                                            {{item.des}}
                                                        </template>
                                                        <template v-else>
                                                            <el-button size="mini" @click="OpenChildWf(item)" type="text">{{$t('查看')}}</el-button>
                                                            <template  v-if="item.isShowUser">
                                                                <l-user  v-for="(userId,index2) in item.userIds"  :key="index2" :value="userId" ></l-user>
                                                            </template>
                                                            {{item.des}}
                                                        </template>
                                                    </div>
                                                </el-card>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                 </l-panel>
                            </template>
                        </l-layout>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('流转记录')" name="wflogs">
                        <div class="l-rblock" style="padding:8px;overflow:hidden auto;" >
                            <el-timeline>
                                <el-timeline-item :type="item.type" v-for="(item,index) in logs" :key="index" :timestamp="item.time" placement="top">
                                    <el-card shadow="hover">
                                        <div class="title" >{{item.name}}</div>
                                        <div class="content">
                                            <template v-if="item.taskType != 3">
                                                <l-user v-for="(userId,index2) in item.userIds"  :key="index2" :value="userId" ></l-user>
                                                {{item.des}}
                                            </template>
                                            <template v-else>
                                                <el-button size="mini" @click="OpenChildWf(item)" type="text">{{$t('查看')}}</el-button>
                                                <template  v-if="item.isShowUser">
                                                    <l-user  v-for="(userId,index2) in item.userIds"  :key="index2" :value="userId" ></l-user>
                                                </template>
                                                {{item.des}}
                                            </template>
                                            <el-button v-if="isFormById(item.unitId)" @click="lookForm(item)" size="mini" type="text">{{$t('查看表单')}}</el-button>
                                        </div>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </l-panel>
        <template #right  >
            <l-panel v-if="userLogs.length >0" style="padding-left:0;" :title="$t('审批信息')" >
                <div class="l-rblock" style="padding:8px;" >
                    <l-wf-audit-info :data="userLogs" ></l-wf-audit-info>
                </div>
            </l-panel>
        </template>
        <wf-form ref="wfform" ></wf-form>

        <look-other-form
            ref="otherForm"
            type="lookmy" 
            
            :params="{processId:otherProcessId}" 
            :isLoadFormData="true" 
            :visible.sync="otherVisible"
            :isParent="isOtherParent"
            >
        </look-other-form>
    </l-layout>
</l-fullscreen-dialog>
</template>

<script>
import mixin from '../../mixins/wf'

import WfForm from './wfForm.vue'
import LookOtherForm from './lookOther.vue'

export default {
    mixins:[mixin()],
    components:{
        WfForm,
        LookOtherForm
    },
    data () {
        return {
            midVisible:false,

            otherProcessId:'',
            otherVisible:false,
            isOtherParent:false,

        }
    },
    watch:{
        visible: {
            handler (n) {
                this.midVisible = n
            }
        },
    },
    methods:{
        resetZoom(){
            this.$refs.bflow.reset()
        },
        handlerZoom(r){
            this.$refs.bflow.handlerZoom(r)
        },
        elementClick(node){
            if(node){
                this.nodeLogs = this.nodeMap[node.id] || []
            }
            else{
                this.nodeLogs = []
            }
        },
        lookForm(item){
            const node = this.wfData.find(t=>t.id == item.unitId)
            if(node.isInherit){
                // 如果是继承表单就开始节点的表单信息
                const startNode = this.wfData.find(t=>t.type == 'startEvent')
                node.formType = startNode.formType
                node.formVerison = startNode.formVerison
                node.formRelationId = startNode.formRelationId
                node.formUrl = startNode.formUrl
                node.authFields = startNode.authFields
            }
            this.$refs.wfform.open(item.name,node,this.processId)
        },

        OpenChildWf(row){
            this.otherProcessId = row.childProcessId
            this.isOtherParent = false
            this.otherVisible = true
        },
        handleOpenParent(){
            this.otherProcessId = this.parentProcessId
            this.isOtherParent = true
            this.otherVisible = true
        }
    }
}
</script>